<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"> 
<head>
	<meta charset="utf-8" />
	<title>Metronic | Pages - Blog</title>
	<meta content="width=device-width, initial-scale=1.0" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />
	<!-- BEGIN GLOBAL MANDATORY STYLES -->

	<link href="media/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-metro.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/style-responsive.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/default.css" rel="stylesheet" type="text/css" id="style_color"/>

	<link href="media/css/uniform.default.css" rel="stylesheet" type="text/css"/>

	<link href="media/css/jquery.fancybox.css" rel="stylesheet" />

	<!-- END GLOBAL MANDATORY STYLES -->

	<!-- BEGIN PAGE LEVEL STYLES -->

	<link href="media/css/blog.css" rel="stylesheet" type="text/css"/>
	<link href="media/css/news.css" rel="stylesheet" type="text/css">
	<!-- END PAGE LEVEL STYLES -->

	<link rel="shortcut icon" href="media/image/favicon.ico" />

</head>

<!-- END HEAD -->

<!-- BEGIN BODY -->

<body class="page-header-fixed page-full-width">
	<jsp:include page="include/head.jsp"/>
	<div class="page-container">
		<div class="page-content">		
			<!-- BEGIN PAGE CONTAINER-->
			<div class="container">
				<!-- BEGIN PAGE HEADER-->
				<div class="row-fluid" >
					<div class="span12" >
					<strong class="text-success"><i class="icon-volume-up"></i> </strong> 站点建设中...	
					</div>
					<div id="promo_carousel" class="carousel slide">
						<div class="carousel-inner">
							<div class="active item">
								<div class=" row-fluid">
									<div class="span7 margin-bottom-20 margin-top-10 animated rotateInUpLeft">
										<h1>${map.objectList[1].blogTitle }</h1>
										<h2>${fn:substring(map.objectList[1].blogContent, 3, 100)}....</h2>
										<p></p>
										<a href="index.html" class="btn red big xlarge">
										详情
										<i class="m-icon-big-swapright m-icon-white"></i>                                
										</a>
									</div>
									<div class="span5 animated rotateInDownLeft">
										<a href="index.html"><img src="media/image/img1_2.png" width="350px" alt=""><!-- <img src="${map.objectList[1].blogPicture }" width="350px" alt=""> --></a>
									</div>
								</div>
							</div>
							<div class="item">
								<div class=" row-fluid ">
									<div class="span5 animated rotateInUpRight">
										<a href="index.html"><img src="media/image/img1_2.png" width="350px" alt=""></a>
									</div>
									<div class="span7 margin-bottom-20 animated rotateInDownLeft">
										<h1>${map.objectList[2].blogTitle }</h1>
										<h2>${fn:substring(map.objectList[2].blogContent, 3, 100)}....</h2>
									
										<a href="index.html" class="btn green big xlarge">
										详情
										<i class="m-icon-big-swapright m-icon-white"></i>                                
										</a>
									</div>
								</div>
							</div>
						</div>
						<a class="carousel-control left" href="#promo_carousel" data-slide="prev">
						<i class="m-icon-big-swapleft m-icon-white"></i>
						</a>
						<a class="carousel-control right" href="#promo_carousel" data-slide="next">
						<i class="m-icon-big-swapright m-icon-white"></i>
						</a>
						
					</div>
					
				</div>
				<!-- END PAGE HEADER-->

				<!-- BEGIN PAGE CONTENT-->
				<div class="row-fluid">
					<div class="row-fluid page-content">
						<div class="span12 ">						
							<div class="span9 article-block">
								<h2>博客</h2>
								<c:forEach var="blogs" items="${map.objectList }">
									<div class="row-fluid " >								
									<div class="span4 blog-img blog-tag-data">
										<span class="badge badge-info">${blogs.theme.themeName}</span>
										<img src="${blogs.blogPicture}" width="250px"  alt="">
										<ul class="unstyled inline">
											<li><i class="icon-calendar"></i> <a href="#">${blogs.blogTime}</a></li>
											<li><i class="icon-comments"></i> <a href="#">${blogs.blogTimes}</a></li>
										</ul>
										<ul class="unstyled inline blog-tags">
											<li>
												<i class="icon-tags"></i> 
												<c:forEach var="tag" items="${blogs.tagList}">
													<a href="#">${tag.tagName}</a> 
												</c:forEach>											
											</li>
										</ul>
									</div>
									<div class="span8 blog-article">

										<h3><a href="getBlogById.do?id=${blogs.id}&&times=${blogs.blogTimes}">${blogs.blogTitle}</a></h3>
																						
										<p style="line-height: 24px;font-size: 18px;font-family: 宋体;">${fn:substring(blogs.blogContent, 3, 100)}....</p>

										<a class="btn blue" style="float: right" href="getBlogById.do?id=${blogs.id}&&times=${blogs.blogTimes}">

										Read more 

										<i class="m-icon-swapright m-icon-white"></i>

										</a>

									</div>

								</div>
								<hr>
								</c:forEach>			
								
								<a class="btn red" style="float: right" href="${action }?pageIndex=${map.pageIndex + 1 }">
									查看更多
									<i class="m-icon-swapright m-icon-white"></i>
								</a>
							</div>
							<!--end span9-->
							<jsp:include page="include/blog_sidebar.jsp"/>
							
					</div>

				</div>
				<!-- END PAGE CONTENT-->
			</div>
			<!-- END PAGE CONTAINER--> 
		</div>
		<!-- END PAGE -->    

	</div>

	<!-- END CONTAINER -->

	<!-- BEGIN FOOTER -->
	<jsp:include page="include/foot.jsp"/>
	<!-- END FOOTER -->
	<!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->

	<!-- BEGIN CORE PLUGINS -->

	<script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script>

	<script src="media/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

	<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->

	<script src="media/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>      

	<script src="media/js/bootstrap.min.js" type="text/javascript"></script>   
	<script src="media/js/jquery.slimscroll.min.js" type="text/javascript"></script>

	<script src="media/js/jquery.blockui.min.js" type="text/javascript"></script>  

	<script src="media/js/jquery.cookie.min.js" type="text/javascript"></script>

	<script src="media/js/jquery.uniform.min.js" type="text/javascript" ></script>

	<!-- END CORE PLUGINS -->

	<script src="media/js/app.js"></script>      

	<script>

		jQuery(document).ready(function() {    

		   App.init();

		   $("#navTop > li[title='index']").addClass("active");
		});
		

	</script>

	<!-- END JAVASCRIPTS -->

<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-37564768-1']);  _gaq.push(['_setDomainName', 'keenthemes.com']);  _gaq.push(['_setAllowLinker', true]);  _gaq.push(['_trackPageview']);  (function() {    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  })();</script></body>

</html>